<script setup lang="ts" name="rankRecord">
import { getAssetsFile } from '@/utils'

const titleArr: { name: string; class: string }[] = [
  { name: 'top1', class: 'record_list' },
  { name: 'top2', class: 'record_list' },
  { name: 'top3', class: 'record_list' },
  { name: 'top4-5', class: 'px_90' },
  { name: 'top6-10', class: 'px_90' },
]

const recordArr = [
  [
    { tipsLocation: 'physical', img: 'watch', name: 'DW情侣手表', day: '' },
    { tipsLocation: '', img: 'pictureFrame', name: '恋爱物语头像框', day: '180天' },
    { tipsLocation: '', img: 'specialEffects', name: '恋爱物语入场特效', day: '180天' },
    { tipsLocation: '', img: 'liang', name: '男:520520 180天', day: '女:521521 180天' },
  ],
  [
    { tipsLocation: '', img: 'pictureFrame', name: '恋爱物语头像框', day: '120天' },
    { tipsLocation: '', img: 'specialEffects', name: '恋爱物语入场特效', day: '120天' },
    { tipsLocation: '', img: 'liang', name: '男:131411 120天', day: '女:131400 120天' },
  ],
  [
    { tipsLocation: '', img: 'pictureFrame', name: '恋爱物语头像框', day: '90天' },
    { tipsLocation: '', img: 'specialEffects', name: '恋爱物语入场特效', day: '90天' },
    { tipsLocation: '', img: 'liang', name: '男:520888 90天', day: '女:520666 90天' },
  ],
  [
    { tipsLocation: '', img: 'pictureFrame', name: '恋爱物语头像框', day: '60天' },
    { tipsLocation: '', img: 'specialEffects', name: '恋爱物语入场特效', day: '60天' },
  ],
  [
    { tipsLocation: '', img: 'pictureFrame', name: '恋爱物语头像框', day: '30天' },
    { tipsLocation: '', img: 'specialEffects', name: '恋爱物语入场特效', day: '30天' },
  ],
]
</script>

<template>
  <div class="record_content flex flex-col items-center">
    <div v-for="(item, index) in titleArr" :key="item.name" class="flex flex-col items-center">
      <img class="title" :src="getAssetsFile(`rankRecord/title/${item.name}.png`)" alt="" />
      <div class="flex flex-wrap justify-between" :class="item.class">
        <div
          v-for="(_item, _index) in recordArr[index]"
          :key="_index"
          :class="{ mr_32: _index === 3 }"
          class="flex flex-col items-center"
        >
          <div class="record_box relative flex justify-center items-center">
            <img class="img" :src="getAssetsFile(`gift/${_item.img}.png`)" alt="" />
            <img
              v-if="_item.tipsLocation"
              :src="getAssetsFile(`rankRecord/tips/${_item.tipsLocation}.png`)"
              class="absolute record_tips"
              alt=""
            />
          </div>
          <span class="w_104 mt_6">{{ _item.name }}</span>
          <span class="w_104 mb_16">{{ _item.day }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.record_content {
  padding-top: 36px;
  width: 375px;
  height: 1248px;
  box-sizing: border-box;
  background-image: url('@/assets/rankRecord/bg.png');
  background-size: 100% 100%;

  .title {
    margin-bottom: 16px;
    width: 197px;
    height: 58px;
  }

  .record_list {
    width: 100vw;
    padding: 0 32px;
    box-sizing: border-box;
  }

  .px_90 {
    width: 100vw;
    padding: 0 90px;
    box-sizing: border-box;
  }

  .mr_32 {
    margin-left: 114px;
  }

  .record_box {
    width: 82px;
    height: 82px;
    background-image: url('@/assets/homepage/recordItem.png');
    background-size: 100% 100%;
  }

  .img {
    width: 72px;
  }

  .w_104 {
    max-width: 104px;
    text-align: center;
    font-size: 12px;
    font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
    font-weight: 400;
    color: #7f43b3;
  }

  .mt_6 {
    margin-top: 6px;
  }

  .mb_16 {
    margin-bottom: 16px;
  }

  .record_tips {
    top: 5px;
    right: 5px;
    width: 32px;
    height: 14px;
  }
}
</style>
